<template>
	<div class="parts-define-table-root">
		<!-- <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
			highlight-current-row @current-change="handleTableCurrentChange" :header-cell-style="{
			color: 'rgba(0, 0, 0, 0.85)',
			fontSize: '14px',
			textAlign: 'left',
			backgroundColor: '#F8F8F8',
			fontWeight: 600,
		}" :row-style="{
			backgroundColor: '#FFFFFF',
		}" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="#f8f8f8"
			:element-loading-text="$t('message.bhView.loading')">
			<el-table-column prop="partsName" :label="$t('message.partsDefineTable.partsName')"></el-table-column>
			<el-table-column prop="partsShape" :label="$t('message.partsDefineTable.partsShape')"></el-table-column>
			<el-table-column prop="partsCount" :label="$t('message.partsDefineTable.partsCount')" width="70"></el-table-column>
		</el-table> -->

		<div class="b-input">
			<div class="b-input-label">
				{{ $t('message.PartsDefine.PartsTable.title') }}
			</div>
		</div>

		<ux-grid class="ux-table" ref="singleTable" :data="partsDefineTableData" :header-cell-style="{
			color: 'rgba(0, 0, 0, 0.85)',
			fontSize: '14px',
			textAlign: 'left',
			fontWeight: 'bold',
			padding: 0,
			height: '32px',
			background: 'rgb(244,245,246)'
		}" :cell-style="{
			color: 'rgba(96,98,102,1)',
			fontSize: '14px',
			textAlign: 'left',
			padding: 0,
			height: '32px',
		}" :checkbox-config="{
			showHeader: false,
		}" @current-change="handleTableCurrentChange" :height="tableHeight" highlight-current-row element-loading-spinner="el-icon-loading"
			element-loading-background="#f8f8f8" :element-loading-text="$t('message.bhView.loading')">
			<template slot="empty"> No data </template>
			<ux-table-column property="label" :title="$t('message.PartsDefine.PartsTable.partsName')" align="left">
				<template slot-scope="scope">
					<p style="text-align: left;">{{ scope.row.partsName }}</p>
				</template>
			</ux-table-column>
			<ux-table-column property="label" :title="$t('message.PartsDefine.PartsTable.partsShape')" align="left">
				<template slot-scope="scope">
					<p style="text-align: left;">{{ scope.row.partsShapeName }}</p>
				</template>
			</ux-table-column>
			<ux-table-column property="label" :title="$t('message.PartsDefine.PartsTable.partsCount')" width="60" align="left">
				<template slot-scope="scope">
					<p style="text-align: right;">{{ scope.row.count }}</p>
				</template>
			</ux-table-column>
		</ux-grid>
	</div>
</template>

<script>
import _ from 'lodash-es';
import $ from "jquery";
export default {
	props: ["PltCode", "dmgCode", "tableData"],
	components: {
    },
	// ["userInfo"],
	// dataプロパティ：変更が検知されるような値
	data() {
		return {
			tableHeight: 1000,
			partsDefineTableData: []
		}
	},
    created() {
	},
	watch: {
		tableData(val) {
			this.partsDefineTableData = val;
		}
	},
	methods: {
		getTableHeight() {
			this.tableHeight = $(".parts-define-left-content-lay").height() - 24 - 32 - 25;
		},
		handleTableCurrentChange(val) {
			this.$emit("onPartsSelect", val);
		}
	},
	mounted() {
		this.getTableHeight();
	},
};
</script>

<style lang="scss" scoped>
.b-input {
	// align-items: center;
	margin-top: 12px;
	margin-bottom: 12px;

	.b-input-label {
		font-size: 14px;
		color: rgba(0, 0, 0, 0.85);
		height: 24px;
		line-height: 24px;
		font-family: HelveticaNeue;
		text-align: center;
	}
}
.parts-define-table-root {
	width: 100%;
	height: 100%;

	::v-deep .current-row>td {
		background-color: rgba(2, 150, 255, 0.07) !important;
	}
}
</style>